我們在講建構會重複使用的元件時，曾經聊過純粹的 CSS 堆疊起來後可以很瑣碎。

當時舉例了從 Inline CSS 簡化到抽出 Class 共用，再到把巢狀的 HTML 元素元件化，藉由封裝重複的邏輯來降低複雜度。

整個簡化的過程中其實參照了許多 Tailwind 的核心邏輯，而這講我們就來正式介紹 Tailwind CSS，並聊聊如何將其整合到我們的 Astro 專案當中。

什麼是 Tailwind CSS

Tailwind 是所謂 Utility-first 的 CSS Framework，直白些的翻譯就是工具類別優先的框架。那麼，何謂工具類別優先？

舉個例子來說，如果我們想要設計一個按鈕，需要填入色彩、間距、圓角與否等資訊，傳統的 CSS 寫法裡常先定義 Class，例如

.btn-primary {
  padding: 0.5rem 1rem;
  background-color: #2563eb;
  color: #ffffff;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.btn-primary:hover {
  background-color: #1d4ed8;
}

然後套用在這個按鈕中 <button class="btn-primary">按鈕</button>。但是在 Tailwind 的寫法中，只要寫成 <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">按鈕</button> 即可。

差別在於 Tailwind「工具化」了這些 CSS 類別，將 padding: 0.5rem 1rem; 簡化成 px-4 px-2、預先定義 bg-blue-600 的色彩、rounded-md 對應了某種程度的圓角。雖然失去了一些彈性，但是把這些數值離散化，就更像是讓我們能將一塊塊積木堆成我們要的樣子，而非用沙子堆砌。

加入 Tailwind CSS

參照 Astro - Styling and CSS #Tailwind、Tailwindcss - Install Tailwind CSS with Astro，我們可以簡單的透過 npx astro add tailwind 在 Astro >= 5.2.0 的版本安裝 >= 4.0.0 的 Tailwind。

執行完畢這個指令，我們可以發現在 package.json 中多了 @tailwindcss/vite 及 tailwindcss 兩個套件，並且在 astro.config.ts 中幫我們引入 tailwindcss。

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite'; // Added

export default defineConfig({
  vite: { plugins: [tailwindcss()] }, // Added
});

也一併新增了 styles/global.css，裡面包含一行程式碼 @import "tailwindcss";。

根據官方文件，通常會建議在 Layout 的檔案中引用（如 src/layouts/Layout.astro），這樣子只要有用到這個 Layout 的 Page 就能使用 Tailwind 的功能。

我們可以在 index.astro 簡單用以下程式碼測試

---
import '../styles/global.css';
---

<h1 class="text-orange-500">Hello, World</h1>
<button class="bg-blue-500 text-white px-4 rounded">Click</button>

這段程式碼主要引用 global.css，因為裡面包含 Tailwind CSS 的基本樣式，而後簡單加上一個標題、按鈕，將他們的 Class 加上 Tailwind 的一些樣式。

*標題、按鈕範例展示

最後就能看到橘色的標題、藍色圓角的按鈕了。

參考資料

1. Tailwind CSS
2. Astro - Styling and CSS #Tailwind
3. Tailwindcss - Install Tailwind CSS with Astro